<template>
  <a-spin class="process-client" :loading="PrData.loading" :size="80" tip="数据加载中，请勿关闭浏览器">
    <template #icon>
      <i class="iconfont icon-loading"></i>
    </template>
    <!-- 审核端头部 -->
    <ProcessHeader v-bind="{ ...compData, title: compData.headerTitle }" />
    <div class="container" @contextmenu="false">
      <!-- 审核端左侧 -->
      <ProcessLeft v-bind="{ ...compData }" />
      <!-- 审核端内容 -->
      <div class="content">
        <slot name="content"></slot>
      </div>
      <!-- 审核端右侧 -->
      <ProcessRight
        v-bind="{ ...compData, seriesSettings: compData.signForm, formRef }"
        @update:handle-change="handleChange"
      />
    </div>
    <!-- 提交最终结果弹窗 -->
    <a-modal
      :visible="compData.submitVisible"
      :title="'提交'"
      :width="502"
      :mask-closable="false"
      :modal-class="'submit-dialog'"
      :footer="false"
      @cancel="handleCancel"
    >
      <div>
        <div class="sumbit-body">
          <div class="submit-title">确定提交该切片吗？</div>
          <div class="submit-tip">提交后切片将不再修改</div>
        </div>
        <div class="bottom-btn">
          <a-button
            type="primary"
            class="left-btn"
            @click="() => handleSubmitVisible({ status: 'more', flag: false })"
            >提交获取新切片</a-button
          >
          <a-button
            type="primary"
            class="right-btn"
            @click="() => handleSubmitVisible({ status: 'save', flag: false })"
            >提交并关闭</a-button
          >
        </div>
      </div>
    </a-modal>
    <!-- 当前已经没有新切片的弹窗 -->
    <Dialog
      :visible="compData.sectionVisible"
      :title="'提示'"
      :width="502"
      :maskClosable="false"
      :isForm="true"
      :hideCancel="true"
      :modalClass="'section-dialog'"
      :okText="'确认'"
      @update:visible="handleSectionVisible"
    >
      <template v-slot>
        <div>
          <div class="submit-title">
            <i class="iconfont icon-jingshi_" style="color: #ff7d00; font-size: 18px"></i>
            已没有新切片，请确认后退出该标注任务
          </div>
          <!-- <div class="submit-tip">提交后切片将不再修改</div> -->
        </div>
      </template>
    </Dialog>
    <!-- 还有未审核病灶弹窗 -->
    <Dialog
      :visible="compData.lesionVisible"
      :title="'提示'"
      :width="502"
      :maskClosable="false"
      :isForm="true"
      :modalClass="'section-dialog'"
      :okText="'确认'"
      @update:visible="handleLesionVisible"
    >
      <template v-slot>
        <div>
          <div class="submit-title">
            <i class="iconfont icon-jingshi_" style="color: #ff7d00; font-size: 18px"></i>
            存在未审核病灶，请全部审核后再提交！
          </div>
        </div>
      </template>
    </Dialog>
  </a-spin>
</template>
<script lang="ts" setup name="ProcessClient">
import { provide, ref, watchEffect, watch } from "vue";
import { useRoute } from 'vue-router';
import _ from 'lodash';
import ProcessHeader from "./components/ProcessHeader/index.vue";
import ProcessLeft from "./components/ProcessLeft/index.vue";
import ProcessRight from "./components/ProcessRight/index.vue";
import Dialog from "@/components/dialog/index.vue";
import * as Store from "@/store";
import { changeFormOption, getViewList, changeFormAddOption, resultForForm } from "@/utils/adapter";
import useContatiner from "./hooks/useContainer";


const props = defineProps({
  type: {
    type: String,
    default: "",
  },
  setColor: {
    type: Function,
    default: () => {}
  }
});

const route = useRoute();
const PrHeaderStore = Store.useProcessHeader();
const PrData = Store.useProcessData();
PrHeaderStore.getToolList(props.type);
const provideObj = {
  getToolBarItem: (callback: Function) => {
    const result = callback();
    if (result.type === "reject" || result.type === "yay") {
      btnData.btnFrom = result.type;
      handleInterface(result);
    };
    if (result.type === "save") {
      btnData.btnFrom = result.type;
      getAuditLesion();
    };
    if ( !["reject", "yay", "save"].includes(result.type) ) {
      emit("toolBarClick", result);
    };
  },
  getLesionItem: (callback: Function) => {
    const result = callback();
    if (result.type === "lesion") {
      // 大小征象切换
      if (result.currentItem.lesionData.isCurrent) {
        getLesionSign(true, result);
        if (result.currentItem.lesionData.lesionType !== 4) {
          PrData.lesionResultList.map(item => {
            if (item.id === result.currentItem.lesionData.lesionType) {
              // 修改两个东西 1. result.currentItem.signForm.form 2. result.currentItem.signForm.formOptions
              // 通过点击的当前项，依将仓库数据中的当前item过滤出相应需要变更的值和当前病灶集合的值
              const tempLesionList = item.lesionList.map(it => it.filter(t => t.imageGroupId === result.currentItem.lesionData.imageGroupId)).filter(item => item.length !== 0);
              const tempViewList = item.viewList.filter(item => item.lesionData.imageGroupId === result.currentItem.lesionData.imageGroupId)
              resultForForm(tempLesionList[0], tempViewList[0]);
            };
          });
          // compData.lesionList = PrData.lesionResultList;
        };
      } else {
        getLesionSign(false);
      };
    };
    emit("lesionClick", result);
  },
}
let {
  compData,
  btnData,
  formRef,
  handleInterface,
  handleChange,
  handleCancel,
  handleSubmitVisible,
  handleSectionVisible,
  handleLesionVisible,
  getAuditLesion,
  getLesionSign,
} = useContatiner(props.setColor);
PrData.getParams();
defineExpose({
  getLesionSign
});
const emit = defineEmits(["toolBarClick", "lesionClick", "getData"]);

provide("provideState", provideObj);

// 拼接工具栏配置数据
watch(() => PrData.toolListMap.size, (newVal, oldVal) => {
  PrData.toolListMap.size > 0 &&
    PrData.toolListMap.forEach((values, key) => {
      PrHeaderStore.setData(values, key);
    });
  getViewList(PrData.$state, compData, route);
  emit("getData", true);
}, {
  deep: true
})

</script>
<style lang="less" scoped>
.arco-spin {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.container {
  width: 100%;
  height: calc(100% - 108px);
  overflow: hidden;
  background: #000000;
  display: flex;
  .content {
    flex: 1;
  }
  :deep(.arco-checkbox-disabled .arco-checkbox-icon){
    background-color: transparent;
    border: 1px solid #ccc;
  }
}

</style>
<style lang="less">
@import url("./styles/toolBarRight.less");
@keyframes LoadingRotate {
  0%   { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}
.arco-spin-mask {
  background-color: rgba(0, 0, 0, 0.6) !important;
  .arco-spin-icon {
    color: #d2effc;
    .icon-loading{
      font-size: 80px;
      &:before{
        animation: LoadingRotate 1s infinite linear;
        display: block;
      }
    }
  }
  .arco-spin-tip {
    color: #d2effc;
  }
}
</style>
